<template>
   
    <div class="zhsf-page-p-content pt40 pl20 pr20 boxsi h100p">

            <ul class="zhsf-ppu-xzjl-b-con clearfix h100p">
                <li class="zhsf-ppu-xzjl-b-c-modu h100p ">
                    <h5 class="zhsf-ppu-xzjl-b-c-m-title">开始时间</h5>
                    <ul class="zhsf-ppu-xzjl-b-c-m-sel clearfix" @mouseDown="timesIntval = true">
                        <li id="staYearBox" class="zhsf-ppu-xzjl-b-c-m-s-modu w33p fl zhsf-ppu-xzjl-b-c-m-s-left"  @scroll="scrollSelectDate($event);selectDate()">
                            <p class="zhsf-ppu-xzjl-b-c-m-s-m-text hide-con">隐形</p>
                            <p class="zhsf-ppu-xzjl-b-c-m-s-m-text hide-con">隐形</p>
                            <template v-for="count in (parseInt(afterYear)+parseInt(beforeYear)+1)">
                                <p :class="(yearCount-1) + count == selYear ? 'zhsf-ppu-xzjl-b-c-m-s-m-text sel-on' : 'zhsf-ppu-xzjl-b-c-m-s-m-text'" :key="count">{{ (yearCount-1) + count}}</p>
                            </template>
                            <p class="zhsf-ppu-xzjl-b-c-m-s-m-text hide-con">隐形</p>
                            <p class="zhsf-ppu-xzjl-b-c-m-s-m-text hide-con">隐形</p>
                        </li>
                        <li id="staMonthBox" class="zhsf-ppu-xzjl-b-c-m-s-modu w33p fl zhsf-ppu-xzjl-b-c-m-s-center" @scroll="scrollSelectDate($event);selectDate()">
                            <p class="zhsf-ppu-xzjl-b-c-m-s-m-text hide-con">隐形</p>
                            <p class="zhsf-ppu-xzjl-b-c-m-s-m-text hide-con">隐形</p>
                            <template v-for="count in 12">
                                <p :class="count  == month ? 'zhsf-ppu-xzjl-b-c-m-s-m-text sel-on' : 'zhsf-ppu-xzjl-b-c-m-s-m-text'" :key="count">{{ count | stringNoTwoAdd }}</p>
                            </template>
                            <p class="zhsf-ppu-xzjl-b-c-m-s-m-text hide-con">隐形</p>
                            <p class="zhsf-ppu-xzjl-b-c-m-s-m-text hide-con">隐形</p>
                        </li>
                        <li id="staDayBox" class="zhsf-ppu-xzjl-b-c-m-s-modu w33p fl zhsf-ppu-xzjl-b-c-m-s-right"  @scroll="scrollSelectDate($event);selectDate()">
                            <p class="zhsf-ppu-xzjl-b-c-m-s-m-text hide-con">隐形</p>
                            <p class="zhsf-ppu-xzjl-b-c-m-s-m-text hide-con">隐形</p>
                            <template v-for="count in day">
                                <p :class="count == date ? 'zhsf-ppu-xzjl-b-c-m-s-m-text sel-on' : 'zhsf-ppu-xzjl-b-c-m-s-m-text'" :key="count">{{ count | stringNoTwoAdd }}</p>
                            </template>
                            <p class="zhsf-ppu-xzjl-b-c-m-s-m-text hide-con">隐形</p>
                            <p class="zhsf-ppu-xzjl-b-c-m-s-m-text hide-con">隐形</p>
                        </li>
                    </ul>
                    <span class="zhsf-ppu-xzjl-b-c-m-texthtml zhsf-ppu-xzjl-b-c-m-year">年</span>
                    <span class="zhsf-ppu-xzjl-b-c-m-texthtml zhsf-ppu-xzjl-b-c-m-month">月</span>
                    <span class="zhsf-ppu-xzjl-b-c-m-texthtml zhsf-ppu-xzjl-b-c-m-day">日</span>
                </li>
                
            </ul>
    </div>
</template>

<script>
export default {
    props : {
        type : {
            type : String,
            default : 'yyyy-mm-dd'
        },
        beforeYear : {
            type : Number,
            default : 5
        },
        afterYear : {
            type : Number,
            default : 5
        }
    },
    data(){
        return {
            timesIntval : true,
            year : 1999,
            yearCount:0,
            month : 1,
            date : 2,
            day : 10,
            selYear : 0,
            selMonth : 0,
            selday : 0
        }
    },
    mounted(){
        let thatDate = new Date();
        this.yearCount = this.selYear = thatDate.getFullYear()-this.beforeYear;
        this.year = this.selYear = thatDate.getFullYear();
        // this.month = this.selMonth = this.stringNoTwoAddFun(thatDate.getMonth() + 1)
        this.month = this.selMonth = thatDate.getMonth() + 1
        // this.date = this.selday = this.stringNoTwoAddFun(thatDate.getDate())
        this.date = this.selday = thatDate.getDate()
        // console.log(this.month);
        this.getDaysInMonth(this.year, this.month)
        // this;
        // $(o.target).animate({scrollTop:numIndex*40},500);
        let dateBox = $('.zhsf-ppu-xzjl-b-c-m-s-modu');
        let boxNUmber = dateBox.length;
        // console.log(dateBox[0]);
        // console.log(boxNUmber);
        setTimeout(() => {
            for (let index = 0; index < boxNUmber; index++) {
                let selIndex = $(dateBox[index]).find('.sel-on').index();
                // console.log(selIndex+'-'+index+'-'+$(dateBox[index]).children().length);
                $(dateBox[index]).scrollTop((selIndex-2)*40);
                
            }
        },200)
    },
    methods:{
        scrollSelectDate(o){  //滚动事件
            // if(){}
            // if(this.timesIntval){
                let top = o.target.scrollTop;
                let numIndex = parseInt(top/40) + 2;
                $(o.target).children('p').eq(numIndex).addClass('sel-on').siblings().removeClass('sel-on');
                let selIndex = $(o.target).index();
                let selHtml = $(o.target).find('.sel-on').html();
                selIndex == 0 ? this.selYear = selHtml : selIndex == 1 ? this.selMonth = selHtml : selIndex == 2 ? this.selday = selHtml : selIndex;
                
            // }
            
        },
        stringNoTwoAddFun(o){ //补零
            o = o.toString();
            return o.length < 2 ? "0"+o : o;
        },
        getDaysInMonth(y, m){ //获取当前年当前月的天数
            let date = new Date(y, m, 1);  
            this.day =  new Date(date.getTime() - 864e5).getDate();  
        },
        selectDate(){
            this.$emit('selectDate',this.selYear+'-'+this.selMonth+'-'+this.selday)
        }
    }
}
</script>

<style>

</style>